<template>
	<!-- 订单底部更多按钮 -->
	<uni-popup ref="showMore" type="bottom" @change="onChange">
		<view class="tbc-flex-col"
			style="flex-direction: column;background-color: #FFFFFF;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
			<view class="tbc-flex-row" style="flex-direction: row;height: 120rpx;align-items: center;">
				<view class="tbc-flex-col" style="flex: 1;flex-direction: column;">
					<text style="font-size: 30rpx;color: #333;padding-left: 30rpx;">更多操作</text>
				</view>
				<view style="height: 40rpx;width:40rpx;position: absolute;right:30rpx;top:30rpx;z-index:99"
					@click="close">
					<image src="/static/icon/close_black.png" style="width:40rpx;height: 40rpx;"></image>
				</view>
			</view>
			<view style="height: 1px;width: 750rpx;background-color: #F5F5F5;"></view>
			<!-- 弹出外框 -->
			<scroll-view class="tbc-flex-col" style="flex-direction: col;height:500rpx;width: 750rpx;height: 800rpx;"
				scroll-y>
				<view style="width: 750rpx;" v-for="(item, index) in operation" :key="index">
					<view style="height: 10rpx;"></view>
					<view style="flex-direction:row;align-items: center;padding:30rpx;" class="tbc-flex-row"
						@tap="item_select(index)">
						<view style="margin-right: 20rpx;">
						</view>
						<view class="tbc-flex-col" style="flex-direction: column;flex: 1;">
							<text style="color:#333;">{{item.label}}</text>
						</view>
						<view style="width: 60rpx;" v-if="!item.disabled">
							<image src="/static/icon/radio.png" style="width: 40rpx;height: 40rpx;"
								v-if="index != selected"></image>
							<image src="/static/icon/radio_on.png" style="width: 40rpx;height: 40rpx;"
								v-if="index == selected"></image>
						</view>
					</view>
					<view style="height: 1px;width: 750rpx;background-color: #F5F5F5;"></view>
				</view>
				<view style="padding-left: 20px; padding-right: 20px;padding: 10px;">{{operation_note}}</view>
			</scroll-view>
			<view class="tbc-flex-col" style="align-items: center;margin-bottom: 20rpx;">
				<view class="tbc-flex-row"
					style="height:80rpx;align-items: center;justify-content: center;background-color: #eb0909;width:650rpx;border-radius:80rpx;"
					@click="formSubmit">
					<text style="color: #fff;font-size: 26rpx;">确定</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import uniPopup from '@/components/uni-official/uni-popup/uni-popup.vue'
	export default {

		components: {
			uniPopup
		},

		data() {
			return {
				order_db: {}, //传入的订单数据包
				operation: [], //按钮列
				operation_note: "", //按钮列备注
				selected: -1, //控制选中

				order: {}, //没使用
				timer: null, //没使用
				paymentList: [], //支持支付的列表-//没使用
			}
		},

		methods: {
			show(order_db) {
				console.log("父亲传入1", order_db);
				console.log("父亲传入2", order_db.operation.note);

				this.order_db = order_db
				this.operation = order_db.operation.data.list
				this.operation_note = order_db.operation.note

				console.log("ssssssssssss1", this.order_db.operation.data);
				this.$refs.showMore.open(); //打开弹窗
			},

			close() {
				console.log("关闭弹窗");
				this.$refs.showMore.close()
			},

			onChange() {
				console.log("弹窗点击");
				return
				this.selected = index
				if (!data.show) clearInterval(this.timer)
			},

			async getPaymentList() {
				console.log("========获取支持支付的列表===========");
				const api_url = '/Pay/PaymentList'
				const res = await uni.$http.post(api_url, {
					order_sn: this.order.order_sn
				})

				this.paymentList = res.data.db.list
			},

			item_select(index) {
				console.log("选项点击", index);
				this.selected = index
				// let ssr = this.operation[index]
				// console.log("选项点击", ssr.label, ssr.code);
				return
				// if (this.paymentList[index].disabled) {
				// 	return
				// }
			},

			async formSubmit() {
				console.log("========确定按钮点击===========");
				let pay_item = this.operation[this.selected]
				console.log("选择操作项目=", JSON.stringify(pay_item));

				if (!pay_item) {
					return uni.showToast({
						title: "未选择操作项目",
						icon: 'none'
					})
				}

				if (pay_item.code == "cancel") {
					// 取消订单
					console.log("取消订单");
					this.orderCancel(this.order_db.order_sn, pay_item.label)
				} else if (pay_item.code == "delete") {
					// 删除订单
					console.log("删除订单");
					this.orderDelete(this.order_db.order_sn, pay_item.label)
				} else if (pay_item.code == "payment") {
					console.log("立即支付");
					// 立即支付
					this.orderPayment(this.order_db.order_sn, pay_item.label)
				} else if (pay_item.code == "logistics") {
					// 查看物流
					console.log("查看物流", JSON.stringify(this.order_db.order_sn));
					this.orderLogistics(this.order_db.order_sn)
				} else {

				}



			},
			// 取消订单
			orderCancel(order_sn, label) {
				console.log("========取消订单===========");
				let _this = this;
				uni.showModal({
					title: '提示',
					content: "您确定" + label + "？",
					success: function(resa) {
						if (resa.cancel) return;
						const api_url = '/Order/Cancel'
						const res = uni.$http.post(api_url, {
							order_sn: order_sn
						})
						_this.close(); //关闭当前窗口
					}
				})
			},
			// 删除订单
			orderDelete(order_sn, label) {
				console.log("========删除订单===========");

				let _this = this;
				uni.showModal({
					title: '提示',
					content: "您确定" + label + "？",
					success: function(resa) {
						if (resa.cancel) return;
						const api_url = '/Order/delete'
						const res = uni.$http.post(api_url, {
							order_sn: order_sn
						})
						_this.close(); //关闭当前窗口
					},

				})

			},


			// 申请退款
			orderRefund(order_sn, label) {
				console.log("========申请退款===========");
				uni.navigateTo({
					url: '/pages/order/refund?order_sn=' + order_sn
				});
				uni.showModal({
					title: '提示',
					content: "您确定" + label + "？",
					success: function(resa) {
						if (resa.cancel) return;
						const api_url = '/Order/refund'
						const res = uni.$http.post(api_url, {
							order_sn: order_sn
						})

					}
				})


			},

			// 申请售后
			orderService(order_sn) {
				uni.navigateTo({
					url: '/pages/order/refund?order_sn=' + order_sn
				});
			},

			// 确认收货
			orderConfirm(order_sn) {},



			// 查看物流
			orderLogistics(order_sn) {
				uni.navigateTo({
					url: '/pages/order/logistics?order_sn=' + order_sn
				})
			},

			// 去评论
			orderComment(order_sn) {
				uni.navigateTo({
					url: '/pages/order/comment?order_sn=' + order_sn
				});
			},
			// 立即支付
			orderPayment(order_sn) {
				console.log("========去支付===========");
				this.close(); //关闭当前窗口
				this.selected = -1
				this.$emit('payment', order_sn); //弹出支付列表
			},



		}
	}
</script>